<template>
    <div style="height: 100%">
        <div class="listBoxs" v-if="indexList.length>0" >
            <div class="btnbox">
                <a-button type="primary" @click.stop="()=>$emit('addIndex')"><a-icon type="plus"></a-icon>{{i18n('list.addIndex','添加索引')}}</a-button>
            </div>
            <div class="tableBox">
                <rx-grid ref="indexTable"
                         :bordered="true"
                         :allowRowSelect="false"
                         :multiSelect="false"
                         :dataSource="indexList"
                         :columns="columns"
                         :showPage="false">
                     <span slot="columns" slot-scope="{ text, record }">
                         {{showColumns(record.columns)}}
                    </span>
                    <span slot="nonUnique" slot-scope="{ text, record }">
                        <a-tag :color="statusMap[text].color">
                            <span>{{ statusMap[text].text }}</span>
                        </a-tag>
                    </span>
                    <span slot="action" slot-scope="{ text, record ,index}" class="actionIcons">
                        <span  @click.stop="del(record,index)">{{$ti18('rxList.delBtn','删除')}}</span>
                    </span>
                </rx-grid>
            </div>
        </div>
        <div v-else class="rx-empty">
            <div class="emptyContainer">
                <a-empty style="margin-bottom: 10px;" />
                <a-button type="primary" @click.stop="()=>$emit('addIndex')"><a-icon type="plus"></a-icon>{{i18n('list.addIndex','添加索引')}}</a-button>
            </div>
        </div>
    </div>
</template>

<script>
import FormBoEntityApi from "@/api/form/bo/formBoEntity";
import {RxGrid} from "@lowcode/jpaas-common-lib";
export default {
    name: "indexList",
    props:["entityId"],
    components: {
        RxGrid
    },
    data() {
        return {
            indexList:[],
            columns: [
                {
                    title: this.$ti18('rxList.index','序号'),
                    type: 'indexColumn',
                    width: 30,
                    dataIndex: 'serial',
                    scopedSlots: {customRender: 'serial'}
                },
                {
                    title: this.i18n('form.indexAlias','索引名'),
                    dataIndex: "indexAlias",
                    width: 100,
                },
                {
                    title: this.i18n('form.indexType','索引类型'),
                    dataIndex: "nonUnique",
                    width: 60,
                    scopedSlots: {customRender: 'nonUnique'}
                },
                {
                    title: this.i18n('form.index','索引'),
                    dataIndex: "columns",
                    scopedSlots: {customRender: 'columns'},
                    width: 240,
                },
                {
                    title: this.$ti18('rxList.action','操作'),
                    dataIndex: "action",
                    width: 50,
                    scopedSlots: { customRender: "action" },
                },
            ],
            statusMap: {
                1: {color: 'green', text: this.i18n('form.normalIndex','普通索引')},
                0: {color: 'red', text: this.i18n('form.uniqueIndex','唯一索引')},
            },
        }
    },
    created() {
        this.getTableIndex();
    },
    methods: {
        i18n(name,text,key){
            return this.$ti18(name,text,"formDb",key);
        },
        getTableIndex(){
            FormBoEntityApi.getTableIndex(this.entityId).then(res=>{
                if(!res.success){
                    return;
                }
                this.indexList=res.data;
            });
        },
        showColumns(columns){
            var str="";
            for (let i = 0; i <columns.length; i++) {
                if(i!=0){
                    str+=","
                }
                str+=columns[i].indexName+"("+columns[i].indexSort+")";
            }
            return str;
        },
        del(record){
            var self=this;
            this.$confirm({
                title: this.$ti18('rxMsa.delInfo','您确定需要删除选中的记录吗？'),
                okText: this.$ti18('rxForm.ackBtn','确认'),
                cancelText: this.$ti18('rxForm.cancelBtn','取消'),
                zIndex:99999,
                onOk() {
                    FormBoEntityApi.delTableIndex(self.entityId,record.indexAlias).then(res=>{
                        self.getTableIndex();
                    })
                },
            });
        }
    },
    watch: {}
}
</script>

<style scoped>
.rx-empty{
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    width: 100%;
}
.emptyContainer{
    margin-top: -40px;
}
.listBoxs{
    display: flex;
    flex-direction: column;
    height: 100%;
    width: 100%;
}
.btnbox{
    padding: 10px 10px 0;
}
.tableBox{
    padding: 10px;
    height: 100%;
    width: 100%;
}
</style>